<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/shop/include :: header"></head>
<body>
<form class="layui-form" action="" lay-filter="shop_goods_specifications-add-form" style="margin-top: 20px;">
    <!--  -->
    <!--  -->
    <div class="layui-form-item">
        <label class="layui-form-label">级别：</label>
        <div class="layui-input-block">
            <select name="level" id="level" lay-verify="required|level" autocomplete="off"
                    placeholder="请选择分类级别" lay-filter="level"
                    class="layui-input" required="required">
                <option value="1">一级</option>
                <option value="2">二级</option>
            </select>
        </div>
    </div>
    <!--  -->
    <div class="layui-form-item" style="display: none" id="dOneSelect">
        <label class="layui-form-label">一级ID：</label>
        <div class="layui-input-block">
            <select name="levelOfOne" id="levelOfOne" autocomplete="off"
                    placeholder="请选择一级分类" lay-filter="oneSelect"
                    class="layui-input">
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="display: none" id="dType">
        <label class="layui-form-label">类型：</label>
        <div class="layui-input-block">
            <select name="type" id="type" autocomplete="off"
                    placeholder="请选择类型" lay-filter="type"
                    class="layui-input">
                <option value="0">请选择</option>
                <option value="1">下拉框</option>
                <option value="2">输入框</option>
            </select>
        </div>
    </div>
    <!--  -->
    <div class="layui-form-item">
        <label class="layui-form-label">规格名称：</label>
        <div class="layui-input-block">
            <input id="specificationsName" name="specificationsName" placeholder="请输入规格名称"
                   class="layui-input" lay-verify="required" autocomplete="off">
        </div>
    </div>
    <!--  -->
    <div class="layui-form-item">
        <label class="layui-form-label">权重：</label>
        <div class="layui-input-block">
            <input id="weight" name="weight" placeholder="请输入权重"
                   class="layui-input" lay-verify="required" autocomplete="off" type="number">
        </div>
    </div>
    <!--  -->
    <div class="layui-form-item">
        <label class="layui-form-label">启用状态：</label>
        <div class="layui-input-block">
            <select name="enableState" id="enableState" lay-filter="enableState">
            </select>
        </div>
    </div>
    <div class="layui-form-item" style="display: none" id="dName">
        <label class="layui-form-label">属性值：<i class="layui-icon layui-icon-add-circle"
                                               onclick="addInput()"></i></label>
        <div class="layui-input-block" id="warehouseNames">
            <div style="display: flex;line-height: 38px;margin-bottom: 15px;">
                <input name="warehouseName" placeholder="请输入属性值" style="width: 49%"
                       class="layui-input" lay-verify="required" autocomplete="off">
                <input name="warehouseWeight" placeholder="请输入权重值" style="width: 48%" type="number"
                       class="layui-input" lay-verify="required" autocomplete="off">
                <i style="margin-left: 6px" class="layui-icon layui-icon-delete" onclick="delInput(this)"></i>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="shop_goods_specifications-add">立即提交</button>
        </div>
    </div>
</form>
<div th:include="/shop/include::footer"></div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['layer', 'jquery', 'form', 'laydate', 'dict'], function () {
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var form = layui.form;
        var dict = layui.dict;

        dict.setSelect("enableState", "enableState");
        //查询所有一级
        $.ajax({
            url: '/platform/goodsspecifications/selectGoodsSpecificationsOfOne',
            type: "get",
            async: false,
            success: function (result) {
                if (result.status == "SUCCESS") {
                    if (result.data != null) {
                        var $html = "";
                        $.each(result.data, function (index, item) {
                            $html += "<option value='" + item.id + "'>" + item.specificationsName + "</option>";
                        });
                        $("#levelOfOne").html("<option value='0'>请选择</option>");
                        $("#levelOfOne").append($html);
                        form.render('select');
                    }
                } else {
                    layer.msg(result.message)
                }
            }
        });

        form.on('select(level)', function (dataObj) {
            var value = $("#level").val();
            if (value == 1) {
                $("#dOneSelect").css('display', 'none');
                $("#dType").css('display', 'none');
            }
            if (value == 2) {
                $("#dOneSelect").css('display', 'block');
                $("#dType").css('display', 'block');
            }
        });

        form.on('select(type)', function (dataObj) {
            var value = $("#type").val();
            if (value == 2) {
                $("#dName").css('display', 'none');
            }
            if (value == 1) {
                $("#dName").css('display', 'block');
            }
        });

        //监听提交
        form.on('submit(shop_goods_specifications-add)', function (data) {
            var arr = document.getElementsByName("warehouseName");
            var arr1 = document.getElementsByName("warehouseWeight");
            var arr2 = [];
            $.ajax({
                url: '/platform/goodsspecifications/add',
                type: "post",
                data: JSON.stringify(data.field),
                contentType: 'application/json; charset=utf-8', // 很重要
                async: false,
                success: function (result) {
                    if (result.status == "SUCCESS") {
                        if (data.field.type == 1) {
                            if (arr.length == 0) {
                                layer.msg("属性值不能为空")
                                return false;
                            } else {
                                for (var i = 0; i < arr.length; i++) {
                                    var obj = {};
                                    obj.warehouseName = arr[i].value;
                                    obj.weight = arr1[i].value;
                                    obj.specificationsId = result.data
                                    arr2.push(obj)
                                }
                                $.ajax({
                                    url: '/platform/goodsspecificationsvalue/add',
                                    type: "post",
                                    data: JSON.stringify(arr2),
                                    contentType: 'application/json; charset=utf-8', // 很重要
                                    async: false,
                                    success: function (result) {
                                        if (result.status == "SUCCESS") {
                                            layer.msg(result.message, {
                                                offset: '15px'
                                                , icon: 1
                                                , time: 1000
                                            }, function () {
                                                window.parent.location.reload();
                                            });
                                        } else {
                                            layer.msg(result.message)
                                        }
                                    }
                                });
                            }
                        } else {
                            layer.msg(result.message, {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            }, function () {
                                window.parent.location.reload();
                            });
                        }
                    } else {
                        layer.msg(result.message)
                    }
                }
            });
            return false;
        });
    });

    function addInput() {
        var str = "<div style=\"display: flex;line-height: 38px;margin-bottom: 15px;\">\n" +
            "                <input name=\"warehouseName\" placeholder=\"请输入属性值\" style=\"width: 49%\"\n" +
            "                       class=\"layui-input\" lay-verify=\"required\" autocomplete=\"off\">\n" +
            "                <input name=\"warehouseWeight\" placeholder=\"请输入权重值\" style=\"width: 48%\" type=\"number\"\n" +
            "                       class=\"layui-input\" lay-verify=\"required\" autocomplete=\"off\">\n" +
            "                <i style=\"margin-left: 6px\" class=\"layui-icon layui-icon-delete\" onclick=\"delInput(this)\"></i>\n" +
            "            </div>";
        $("#warehouseNames").append(str);
    }

    function delInput(data) {
        var par = data.parentNode;
        var pars = par.parentNode;
        pars.removeChild(par);
    }
</script>
</body>
</html>